<template>
  <view class="chat-video-wrap">
    <image
      class="chat-video"
      mode="widthFix"
      @click="imageClick"
      :src="data.extend.cover"
    ></image>
    <view class="mask"></view>
    <image
      class="video-play-icon"
      src="/pagesChat/static/img/chat/play.png"
      mode="aspectFit"
      @click="imageClick"
    >
    </image>
    <video id="myVideo" style="display: none"></video>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    imageClick() {
      console.log(this.data);
      // #ifdef APP-PLUS
      let win = uni.getSubNVueById("video-player");
      win.show("slide-in-bottom", 200, () => {
        uni.$emit("chat-video-player", this.data);
      });
      // #endif

      // #ifdef MP-WEIXIN
      // 小程序端改用其他方式（如跳转页面或自定义弹窗）
      uni.navigateTo({
        url:
          "/pagesChat/components/chat-list/msg-template/video-player?data=" +
          encodeURIComponent(JSON.stringify(this.data)),
      });
      // #endif
    },
  },
};
</script>

<style lang="scss">
.chat-video-wrap {
  position: relative;
  // height: 480upx;
  // width: 320upx;
  max-width: 70vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 水平居中 */

  .chat-video {
    // height: 480upx;
    width: 320upx;
    border-radius: 16upx;
  }

  .mask {
    position: absolute;
    border-radius: 16upx;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.3);
  }

  .video-play-icon {
    width: 64upx;
    height: 64upx;
    position: absolute;
    left: 50%;
    /* 基于父元素宽度 */
    transform: translateX(-50%);
    /* 回退自身宽度的一半 */
    z-index: 2;
  }
}
</style>
